<!DOCTYPE HTML>
<html>
 <HEAD>
  <TITLE> IPT.Class </TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" type="text/css" href="../themes/default/ipt-min.css" />
	<!-- 导入包 -->
   <script type="text/javascript" src="jquery-1.8.2.js"></script>	
   <script type="text/javascript" src="../dest/ipt-min.js"></script>
   <style>
   	* {
   		margin:0px;
   		padding : 0px;
   	}
   	
   	ul {
   		list-style : none;
   		margin : 0px;
   		padding : 0px;
   	}
   	
   	.window1 {
   		width : 400px;
   		height : 200px;
   		position : absolute;
   		background : blue;
   		margin: -200px 0 0 -200px;
   		top : 50%;
   		left : 50%;
   		display : none;
   	}
   	
    .margin {
    	margin : 200px;
    }
   </style>
 </HEAD>

 <BODY >
  <div >
 	<ul id="test1">
 	<li>this is a test!</li>
 	<li>this is a test!</li>
 	<li>this is a test!</li>
 	<li>this is a test!</li>
 	</ul>
 	 <ul id="test2">
 	<li><h2>title</h2></li>
 	<li>this is a test!</li>
 	<li>this is a test!</li>
 	<li>this is a test!</li>
 	</ul>
 	 <ul id="test3">
 	<li>this is a test!</li>
 	<li>this is a test!</li>
 	<li>this is a test!</li>
 	<li>this is a test!</li>
 	</ul>
 	<button id="delete" text="button">delete selected panel</button> 	<button id="add" text="button">add</button>
 </div>
 <div class="window1"></div>
 <script>
	var tab = new IPT.TabPanel({
		renderTo : document.body,
		title : "panel",
		width : "600px",
		height : '200px'
	});

	tab.addClass("margin");
	tab.add(new IPT.Panel({
		title : "panel1",
		closable : true,
		html : $("#test1")
	}));
	tab.add(new IPT.Panel({
		title : "panel1",
		closable : true,
		html : $("#test2")
	}));
	tab.add(new IPT.Panel({
		title : "panel1",
		closable : true,
		html : $("#test3")
	}));
	tab.add(new IPT.Panel({
		title : "panel1",
		closable : true,
		html : "panel1"
	}));
	tab.add(new IPT.Panel({
		title : "panel1",
		closable : true,
		html : "panel1"
	}));
	
	$("#delete").click(function(){
		tab.removeAt(tab.getSelectedIndex());
	});
	
	$("#add").click(function(){
		tab.add(new IPT.Panel({
			title : "panel1",
			closable : true,
			html : "panel1" + Math.random()
		}));
	});	
	
 </script>
 </body>
 
</HTML>